<template>
  <div class="pagecontent">
    <div class="commonheader">
      <i class="iconback"
         @click="backClick"></i>
      <h3>查询结果</h3>
    </div>
    <div class="conditionbox">
      筛选条件：<span>{{strfilter||filterObjArr.join('; ')}}</span><a class="restartbtn"
         @click="resetClick">重新筛选</a>
    </div>
    <div class="muicontent">
      <ul class="resultlist">
        <li v-for="(item,index) in resultData"
            :key="index"
            @click="itemClick(item.itemId,item.name)">
          <div class="goodsimg"><img :src="item.url" /></div>
          <div class="goodsinfo">
            <h3 class="goodstitle">{{item.name}}</h3>
            <!--<em class="level">{{item.level}}</em>-->
            <div class="typebox">
              <div class="unitbox">
                <p>{{item.length}}</p>
                <p>长</p>
              </div>
              <div class="unitbox">
                <p>{{item.width}}</p>
                <p>宽</p>
              </div>
              <div class="unitbox">
                <p>{{item.height}}</p>
                <p>高</p>
              </div>
              <div class="unitbox">
                <p class="f-toe">{{item.material}}</p>
                <p>材质</p>
              </div>
            </div>
            <div class="price"><sub>￥</sub>{{item.mark_money}} <span class="oldprice">国内新包价</span></div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import Bus from '../../../static/js/bus'
export default {
  name: 'searchResult',
  data () {
    return {
      strfilter: '',
      filterArr: [],
      acceptfliterArr: [],
      filterObjArr: [],
      resultData: [
        // {
        //   imgsrc: '../../../static/images/upload/pic08.png',
        //   level: '9成新',
        //   title: 'ONTHEGO手袋 路易威登女包 19新款',
        //   glength: '30cm',
        //   gwidth: '20cm',
        //   gheight: '15cm',
        //   newprice: '9,800',
        //   gtip: '国内新包价'
        // },
        // {
        //   imgsrc: '../../../static/images/upload/pic08.png',
        //   level: '9成新',
        //   title: 'ONTHEGO手袋 路易威登女包 19新款',
        //   glength: '30cm',
        //   gwidth: '20cm',
        //   gheight: '15cm',
        //   newprice: '9,800',
        //   gtip: '国内新包价'
        // },
        // {
        //   imgsrc: '../../../static/images/upload/pic08.png',
        //   level: '9成新',
        //   title: 'ONTHEGO手袋 路易威登女包 19新款',
        //   glength: '30cm',
        //   gwidth: '20cm',
        //   gheight: '15cm',
        //   newprice: '9,800',
        //   gtip: '国内新包价'
        // },
        // {
        //   imgsrc: '../../../static/images/upload/pic08.png',
        //   level: '9成新',
        //   title: 'ONTHEGO手袋 路易威登女包 19新款',
        //   glength: '30cm',
        //   gwidth: '20cm',
        //   gheight: '15cm',
        //   newprice: '9,800',
        //   gtip: '国内新包价'
        // },
        // {
        //   imgsrc: '../../../static/images/upload/pic08.png',
        //   level: '9成新',
        //   title: 'ONTHEGO手袋 路易威登女包 19新款',
        //   glength: '30cm',
        //   gwidth: '20cm',
        //   gheight: '15cm',
        //   newprice: '9,800',
        //   gtip: '国内新包价'
        // }
      ]
    }
  },
  beforeCreate () {
    Bus.$on('sendfilterdata', (data) => {
      this.filterArr = data
      let filters = []
      this.acceptfliterArr = this.filterArr.concat()
      for (let j = 0; j < this.acceptfliterArr.length; j++) {
        if (this.acceptfliterArr[j].name === '最大长度') {
          this.acceptfliterArr.splice(j, 1)
          this.acceptfliterArr[j - 1].value = this.acceptfliterArr[j - 1].value
        } else if (this.acceptfliterArr[j].name === '最大宽度') {
          this.acceptfliterArr[j - 1].value = this.acceptfliterArr[j - 1].value
          this.acceptfliterArr.splice(j, 1)
        } else if (this.acceptfliterArr[j].name === '最大高度') {
          this.acceptfliterArr.splice(j, 1)
          this.acceptfliterArr[j - 1].value = this.acceptfliterArr[j - 1].value
        }
      }
      for (let i = 0; i < this.acceptfliterArr.length; i++) {
        console.log(data)
        filters.push(this.acceptfliterArr[i].value)
      }
      for (let i = 0; i < filters.length; i++) {
        if (typeof filters[i] === 'number') {
          filters[i] = filters[i] + 1
        }
      }
      console.log(filters)
      this.strfilter = filters.join(';')
      console.log(this.filterArr)
      console.log(this.strfilter)
    })
  },
  mounted () {
    // this.filterArr = this.strfilter.split(';')
    console.log(this.$store.state.filterObj)
    this.filterObjArr = Object.values(this.$store.state.filterObj) // store里获取的对象转换成数组

    let params = {}
    let this_ = this
    console.log(this.filterArr)
    if (this.filterArr.length > 0) {
      for (let i = 0; i < this.filterArr.length; i++) {
        if (this.filterArr[i].name === '系列') {
          params.series = this.filterArr[i].value
        } else if (this.filterArr[i].name === '包面颜色') {
          params.bag_colour = this.filterArr[i].value
        } else if (this.filterArr[i].name === '型号') {
          params.size = this.filterArr[i].value
        } else if (this.filterArr[i].name === '性别') {
          params.shiyong_people = this.filterArr[i].value
        } else if (this.filterArr[i].name === '功能款式') {
          params.function_style = this.filterArr[i].value
        } else if (this.filterArr[i].name === '特征款式') {
          params.character_style = this.filterArr[i].value
        } else if (this.filterArr[i].name === '流行元素') {
          params.popular_elements = this.filterArr[i].value
        } else if (this.filterArr[i].name === '材质') {
          params.material = this.filterArr[i].value
        } else if (this.filterArr[i].name === '最小长度') {
          params.minLength = this.filterArr[i].value
        } else if (this.filterArr[i].name === '最大长度') {
          params.maxLength = this.filterArr[i].value
        } else if (this.filterArr[i].name === '最小宽度') {
          params.minWidth = this.filterArr[i].value
        } else if (this.filterArr[i].name === '最大宽度') {
          params.maxWidth = this.filterArr[i].value
        } else if (this.filterArr[i].name === '最小高度') {
          params.minHeight = this.filterArr[i].value
        } else if (this.filterArr[i].name === '最大高度') {
          params.maxHeight = this.filterArr[i].value
        } else {
          params.serialNumber = this.filterArr[i].value
        }
      }
      this.$store.commit('filterObjFun', params)
      filterQuery(params)
    } else {
      filterQuery(this.$store.state.filterObj)
    }
    function filterQuery (obj) {
      this_.$http.post(`${this_.baseUrl.filterQuery}`, obj).then((res) => {
        this_.resultData = res.data.data
      })
    }
  },
  methods: {
    resetClick () {
      this.$router.go(-1)
    },
    backClick () {
      this.$router.go(-1)
    },
    itemClick (itemID, item) {
      this.$store.commit('gooddIdFun', itemID)
      this.$store.commit('goodsTitleFun', item)
      // let id = localStorage.getItem('id')
      // console.log(id)
      let id = this.$store.state.typeid
      console.log(id)
      if (id === '0') {
        console.log(itemID)
        this.$router.push({
          name: 'goodsDetail',
          query: { itemId: itemID }
        })
      } else {
        this.$router.push({
          name: 'evaluateNumber',
          query: { itemName: item }
        })
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
.muicontent
  position absolute
  top 1.66rem
  bottom 0
  left 0
  right 0
  overflow-y auto
.conditionbox
  font-size 0.28rem
  color #666
  height 0.76rem
  line-height 0.76rem
  background #f6f5f5
  padding-left 0.3rem
  span
    color #d21733
    display inline-block
    white-space nowrap
    overflow hidden
    text-overflow ellipsis
    max-width 4rem
    vertical-align -0.28rem
  .restartbtn
    display inline-block
    width 1.56rem
    line-height 0.76rem
    text-align center
    font-size 0.28rem
    color #666
    border-left 0.02rem solid #ccc
    float right
.resultlist
  li
    display flex
    border-bottom 1px solid #e6e6e6
    .goodsimg
      width 1.8rem
      height 1.8rem
      font-size 0
      line-height 1.8rem
      text-align center
      padding 0.3rem
      img
        max-width 100%
        max-height 100%
        display inline-block
        vertical-align middle
    .goodsinfo
      flex 1
      padding 0.2rem 0.3rem 0.2rem 0
      .goodstitle
        font-size 0.3rem
        color #333
        line-height 1.3
        font-weight bold
        .level
          font-size 0.18rem
          display inline-block
          font-weight normal
          min-width 0.7rem
          height 0.28rem
          line-height 0.28rem
          text-align center
          color #d21733
          box-sizing border-box
          border 0.01rem solid #d21733
          border-radius 0.05rem
          margin-right 0.1rem
          vertical-align 0.03rem
      .typebox
        width 100%
        clear both
        overflow hidden
        .unitbox
          width 20%
          float left
          text-align center
          p
            &:nth-child(1)
              font-size 0.24rem
              color #333
              padding 0.2rem 0 0.15rem 0
            &:nth-child(2)
              font-size 0.18rem
              color #999
              // padding-left 0.16rem
          .f-toe
            overflow hidden
            white-space nowrap
            text-overflow ellipsis
          &:last-child
            width 40%
            // p:nth-child(2)
            // padding-left 0.5rem
      .price
        font-size 0.32rem
        color #333
        margin-top 0.25rem
        font-weight bold
        sub
          font-size 0.2rem
          // margin-right: 0.05rem;
          bottom 0
        .oldprice
          font-size 0.2rem
          color #999
          font-weight normal
          // text-decoration: line-through;
          margin-left 0.1rem
    &:last-child
      border-bottom 0
</style>
